<template>
    <div class="userBox">
        <div class="usersTitle">
            <div class="titleText">
                {{ pageName }}
                <span v-if="pageData"
                    >- <span class="apiCreateUser">{{ pageData.userCreate }}</span></span
                >
            </div>
            <el-button type="primary" @click="$router.back(-1)" size="mini">返回</el-button>
        </div>
        <div v-if="pageData">
            <div class="apiList" v-if="pageData.version">
                <div class="apiTypeName">接口版本</div>
                <div class="apiTypeContent">{{ pageData.version }}</div>
            </div>
            <div class="apiList" v-if="pageData.description">
                <div class="apiTypeName">简要描述</div>
                <div class="apiTypeContent">{{ pageData.description }}</div>
            </div>

            <div class="apiList" v-if="pageData.requestUrl">
                <div class="apiTypeName">请求URL</div>
                <div class="apiTypeContent multiys">
                    <div class="requestUrl">
                        http://xx.com<span>{{ pageData.requestUrl }}</span>
                    </div>
                    <el-button type="text" icon="el-icon-document-copy" @click="copyRequestUrl(pageData.requestUrl)">复制</el-button>
                </div>
            </div>
            <div class="apiList" v-if="pageData.requestMethod">
                <div class="apiTypeName">请求方式</div>
                <div class="apiTypeContent">{{ pageData.requestMethod }}</div>
            </div>
            <!-- <div class="apiList">
                <div class="apiTypeName">参数示例</div>
                <div class="apiExample">
                    <pre>{{ pageData.responseContent }}</pre>
                </div>
            </div> -->
            <div class="apiList" v-if="pageData.requestParameters.length > 0">
                <div class="apiTypeName">请求参数</div>
                <el-table :data="pageData.requestParameters" style="width: 100%" border header-row-class-name="elTableStyle">
                    <el-table-column prop="parametersName" label="参数名"> </el-table-column>
                    <el-table-column prop="isMust" label="是否必须">
                        <template slot-scope="scope">
                            {{ scope.row.isMust == '1' ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="parameterType" label="类型"> </el-table-column>
                    <el-table-column prop="explain" label="说明"></el-table-column>
                </el-table>
            </div>
            <div class="apiList" v-if="pageData.responseContent">
                <div class="apiTypeName">返回示例</div>
                <div class="apiExample">
                    <pre>{{ pageData.responseContent }}</pre>
                </div>
            </div>
            <div class="apiList" v-if="pageData.responseParameters.length > 0">
                <div class="apiTypeName">返回参数说明</div>
                <el-table :data="pageData.responseParameters" style="width: 100%" border header-row-class-name="elTableStyle">
                    <el-table-column prop="parametersName" label="参数名"> </el-table-column>
                    <el-table-column prop="isMust" label="是否必须">
                        <template slot-scope="scope">
                            {{ scope.row.isMust == '1' ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="parameterType" label="类型"> </el-table-column>
                    <el-table-column prop="explain" label="说明"></el-table-column>
                </el-table>
            </div>
            <div class="apiList" v-if="pageData.remarks">
                <div class="apiTypeName">备注</div>
                <div class="apiTypeContent">{{ pageData.remarks }}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            pageName: '查看接口详情',
            pageData: ''
        }
    },
    mounted() {
        ;(this as any).pageName = (this as any).$route.query.name
        ;(this as any).getPageData((this as any).$route.query.docId)
    },

    methods: {
        // 获取api文档内容
        getPageData(id: string) {
            let _that = this as any
            _that.$request
                .get('/api/oa/doc/getInterfaceDocByDocId', {
                    docId: id
                })
                .then((res: any): void => {
                    if (res.code == 200) {
                        _that.pageData = res.data
                    }
                })
        },
        copyRequestUrl(url: string) {
            const input = document.createElement('input')
            document.body.appendChild(input)
            input.setAttribute('value', url)
            input.select()
            if ((document as any).execCommand('copy')) {
                ;(document as any).execCommand('copy')
                ;(this as any).$message.success('复制成功')
                // console.log('复制成功')
            }
            document.body.removeChild(input)
        }
    }
}
</script>
<style lang="scss" scoped>
.userBox {
    background: #ffffff;
    padding: 20px;
    .usersTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .titleText {
            font-weight: 600;
            .apiCreateUser {
                font-weight: bold;
                font-size: 16px;
            }
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .userHeadImg {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
    }
    .apiList {
        margin-bottom: 20px;
        .apiTypeName {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .apiTypeContent {
            display: inline-block;
            padding-left: 20px;
            position: relative;
            &::before {
                position: absolute;
                content: '';
                width: 5px;
                height: 5px;
                background: #333;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .multiys {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .requestUrl {
            color: #d14;
            border: 1px solid #ddd;
            background: #f6f6f6;
            padding: 3px 10px;
            border-radius: 3px;
            margin-right: 15px;
        }
        .apiExample {
            border: 1px solid #ddd;
            background: #f6f6f6;
            padding: 10px;
            border-radius: 3px;
        }
    }
}
</style>
<style>
.userBox .elTableStyle {
    color: #333333;
}
.userBox .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.userBox table tr td .cell {
    text-align: center !important;
}
</style>
